<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<style>
		/* 基本配置 */
		* {
			padding: 0px;
			margin: 0px;
		}
		body {
			display: flex;
			align-items: center;
			align-content: center;
			justify-content: space-around;
			/* background-color: black; */
		}
		.container {
			margin-top: 70px;
			width: 500px;
			height: 500px;
			/* border: 1px solid red; */
			position: relative;
		}
		/* 设置基本样式 */
		.circle {
			width: 32px;
			height: 32px;
			border: 3px solid #fff;
			background-color: #ffa339;
			border-radius: 50%;
			box-shadow: 0px 0px 5px rgba(255, 255, 255, 0.5),
				2px 2px 5px rgba(0, 0, 0, 0.2);
			display: flex;
			text-align: center;
			justify-content: center;
			align-content: center;
			align-items: center;
			position: absolute;
			bottom: 10px;
			left: 10px;
		}

		.circle img {
			width: 85%;
		}

		.items li {
			width: 32px;
			height: 32px;
			border: 3px solid #fff;
			background-color: #ffa339;
			border-radius: 50%;
			box-shadow: 0px 0px 5px rgba(255, 255, 255, 0.5),
				2px 2px 5px rgba(0, 0, 0, 0.2);
			display: flex;
			text-align: center;
			justify-content: center;
			align-content: center;
			align-items: center;
			position: absolute;
			bottom: 10px;
			left: 10px;
			z-index: -1;
			display: block;
			transition: 1s;
		}

		li img {
			width: 85%;
		}

		/* 这是通过过渡实现的效果 */
		#menu:checked ~ .items li:nth-child(1) {
			transform: translateY(-100px) rotate(360deg);
		}

		/* 以下是通过动画实现的效果 */
		/* 开始制作动画效果 */
		/* 如果点击 */
		/* #menu:checked ~ .items li:nth-child(1) {
			animation-name: appear-1;
			animation-duration: 240ms;
			animation-iteration-count: 1;
			animation-fill-mode: forwards;
			animation-delay: 20ms;
		} */
		/* 未点击的情况 */
		/* #menu:not(:checked) ~ .items li:nth-child(1) {
			animation-name: disappear-1;
			animation-duration: 387.5ms;
			animation-iteration-count: 1;
			animation-fill-mode: forwards;
		} */

		/* @-webkit-keyframes appear-1 {
			0% {
				transform: translate3d(0, 0, 0px) rotateZ(270deg);
				animation-timing-function: cubic-bezier(1, 0.6, 0.57, 0.75);
			}
			80% {
				animation-timing-function: cubic-bezier(0.45, 0.97, 0.51, 0.78);
				transform: translate3d(10px, -210px, 0px) rotateZ(0deg);
			}
			100% {
				transform: translate3d(15px, -198px, 0px);
			}
		}
		@-webkit-keyframes disappear-1 {
			0% {
				transform: translate3d(15px, -198px, 0px) rotateZ(0deg);
				animation-timing-function: cubic-bezier(1, 0.6, 0.57, 0.75);
			}
			70% {
				transform: translate3d(10px, -210px, 0px) rotateZ(360deg);
				animation-timing-function: cubic-bezier(0.45, 0.97, 0.51, 0.78);
			}
			100% {
				transform: translate3d(0, 0, 0px) rotateZ(540deg);
			}
		} */

		#menu:checked ~ .items li:nth-child(2) {
			animation-name: appear-2;
			animation-duration: 240ms;
			animation-iteration-count: 1;
			animation-fill-mode: forwards;
			animation-delay: 20ms;
		}
		/* 未点击的情况 */
		#menu:not(:checked) ~ .items li:nth-child(2) {
			animation-name: disappear-2;
			animation-duration: 387.5ms;
			animation-iteration-count: 1;
			animation-fill-mode: forwards;
		}

		@-webkit-keyframes appear-2 {
			0% {
				transform: translate3d(0, 0, 0px) rotateZ(270deg);
				animation-timing-function: cubic-bezier(1, 0.6, 0.57, 0.75);
			}
			80% {
				animation-timing-function: cubic-bezier(0.45, 0.97, 0.51, 0.78);
				transform: translate3d(110px, -170px, 0px) rotateZ(0deg);
			}
			100% {
				transform: translate3d(100px, -160px, 0px);
			}
		}
		@-webkit-keyframes disappear-2 {
			0% {
				transform: translate3d(100px, -160px, 0px) rotateZ(0deg);
				animation-timing-function: cubic-bezier(1, 0.6, 0.57, 0.75);
			}
			70% {
				transform: translate3d(110px, -170px, 0px) rotateZ(360deg);
				animation-timing-function: cubic-bezier(0.45, 0.97, 0.51, 0.78);
			}
			100% {
				transform: translate3d(0, 0, 0px) rotateZ(540deg);
			}
		}

		#menu:checked ~ .items li:nth-child(3) {
			animation-name: appear-3;
			animation-duration: 240ms;
			animation-iteration-count: 1;
			animation-fill-mode: forwards;
			animation-delay: 20ms;
		}
		/* 未点击的情况 */
		#menu:not(:checked) ~ .items li:nth-child(3) {
			animation-name: disappear-3;
			animation-duration: 387.5ms;
			animation-iteration-count: 1;
			animation-fill-mode: forwards;
		}

		@-webkit-keyframes appear-3 {
			0% {
				transform: translate3d(0, 0, 0px) rotateZ(270deg);
				animation-timing-function: cubic-bezier(1, 0.6, 0.57, 0.75);
			}
			80% {
				animation-timing-function: cubic-bezier(0.45, 0.97, 0.51, 0.78);
				transform: translate3d(180px, -110px, 0px) rotateZ(0deg);
			}
			100% {
				transform: translate3d(170px, -100px, 0px);
			}
		}
		@-webkit-keyframes disappear-3 {
			0% {
				transform: translate3d(170px, -100px, 0px) rotateZ(0deg);
				animation-timing-function: cubic-bezier(1, 0.6, 0.57, 0.75);
			}
			70% {
				transform: translate3d(180px, -110px, 0px) rotateZ(360deg);
				animation-timing-function: cubic-bezier(0.45, 0.97, 0.51, 0.78);
			}
			100% {
				transform: translate3d(0, 0, 0px) rotateZ(540deg);
			}
		}

		#menu {
			display: none;
		}
		#menu:checked ~ .items li:nth-child(4) {
			animation-name: appear-4;
			animation-duration: 240ms;
			animation-iteration-count: 1;
			animation-fill-mode: forwards;
			animation-delay: 20ms;
		}
		/* 未点击的情况 */
		#menu:not(:checked) ~ .items li:nth-child(4) {
			animation-name: disappear-4;
			animation-duration: 387.5ms;
			animation-iteration-count: 1;
			animation-fill-mode: forwards;
		}

		@-webkit-keyframes appear-4 {
			0% {
				transform: translate3d(0, 0, 0px) rotateZ(270deg);
				animation-timing-function: cubic-bezier(1, 0.6, 0.57, 0.75);
			}
			80% {
				animation-timing-function: cubic-bezier(0.45, 0.97, 0.51, 0.78);
				transform: translate3d(210px, -15px, 0px) rotateZ(0deg);
			}
			100% {
				transform: translate3d(198px, -10px, 0px);
			}
		}
		@-webkit-keyframes disappear-4 {
			0% {
				transform: translate3d(198px, -10px, 0px) rotateZ(0deg);
				animation-timing-function: cubic-bezier(1, 0.6, 0.57, 0.75);
			}
			70% {
				transform: translate3d(210px, -15px, 0px) rotateZ(360deg);
				animation-timing-function: cubic-bezier(0.45, 0.97, 0.51, 0.78);
			}
			100% {
				transform: translate3d(0, 0, 0px) rotateZ(540deg);
			}
		}
	</style>
	<body>
		<div class="container">
			<input type="checkbox" id="menu" checked="checked" />
			<label for="menu">
				<div class="circle">
					<img src="./imgs/plus.png" alt="" />
				</div>
			</label>
			<ul class="items">
				<li><img src="./imgs/phone.png" alt="" /></li>
				<li><img src="./imgs/location.png" alt="" /></li>
				<li><img src="./imgs/message.png" alt="" /></li>
				<li><img src="./imgs/share.png" alt="" /></li>
			</ul>
		</div>
	</body>
</html>
